
import React from "react";
import agent from 'server';
import { Button, Drawer, Input, List } from "antd";
import useVisible from 'tools/hooks/useVisible';
import IFileItem from "Controller/State/FileItem";
import { FileOutlined, FolderOpenOutlined } from "@ant-design/icons";

export interface ISelectResourceProps {
    /** 文件 */
    value?: IFileItem;

    /** 改变 */
    onChange?: (e: IFileItem) => void;
}

/** 选择资源 */
export default function SelectResource(props: ISelectResourceProps) {

    const [value, setValue] = React.useState(props.value);

    const [loading, setLoading] = React.useState(false);

    const { isOpen, onCancel, onOpen } = useVisible();

    const [location, setLocation] = React.useState(['']);

    const path = React.useMemo(() => location.join('/'), [location]);

    const [currentFileList, setCurrentFileList] = React.useState<IFileItem[]>([]);

    const goBack = React.useCallback(() => {
        setLocation(s => s.slice(0, -1))
    }, [])

    const onClickItem = React.useCallback((item: IFileItem) => {
        if (!item.isFile) {
            setLocation(s => [...s, item.name])
        }

        else if (item.extension === 'glb') {
            setValue(item)
            props.onChange && props.onChange(item);
            onCancel();
        }
    }, [onCancel, props])

    React.useEffect(() => { isOpen && setLocation(['']) }, [isOpen]);

    React.useEffect(() => { setValue(props.value) }, [props.value]);

    React.useEffect(() => {
        (async () => {
            if (!isOpen) return;
            setLoading(true);
            try {
                const { body } = (await agent.post('/api/project/queryFolder').send({ path }).over());
                setCurrentFileList(body);
            } catch (error) {
                console.error(error);
            }
            setLoading(false);
        })()
    }, [isOpen, path]);

    return (
        <>
            <Input
                readOnly
                value={value?.name}
                addonAfter={
                    <Button size="small" type="text" onClick={onOpen}>
                        选择
                    </Button>
                }
            />
            <Drawer title="选择资源" placement="right" onClose={onCancel} open={isOpen}>
                <List
                    bordered
                    loading={loading}
                    header={location.length > 1 ? <Button type="text" size="small" onClick={goBack} >../</Button> : undefined}
                    dataSource={currentFileList}
                    renderItem={(item, index) => (
                        <List.Item key={index}>
                            <List.Item.Meta
                                avatar={item.isFile ? <FileOutlined /> : <FolderOpenOutlined />}
                                description={<Button type="text" size="small" title={item.name} onClick={() => { onClickItem(item) }} >{item.name}</Button>}
                            />
                        </List.Item>
                    )}
                />
            </Drawer>
        </>
    )
}
